<template>
	<div class="check-task">
		<div>

			<div class="down-part">
					<van-field
						class="input_text"
						:value="data.EnterpriseName"
						label="上报企业"
						placeholder="请选择"
						required
						readonly
						@click="_goCheckPeople()"
					>
						<template #right-icon><van-icon name="arrow" /></template>
					</van-field>
				</div>

				<eagle-radio-group
					required
					label="上报类型"
					v-model="data.ReasonType"
					name="ReasonType"
					direction="horizontal"
					:dataSource="data.PramListChs"
				></eagle-radio-group>
			
			<div class="up-part">
				<div>
					<div>
						<van-field
							class="input_text"
							label="上报原因"
							input-align="right"
						>
							<template #input>
								<div></div>
							</template>
						</van-field>
					</div>
					<van-field
						v-model="data.Remarks"
						rows="3"
						autosize
						placeholder="请输入"
						type="textarea"
					/>
				</div>
			</div>
			
			<div class="fjcolor">
				<div class="borderbot">
					<div class="upload-hd">
						<span class="imglist">上报附件</span>
						<div class="imgs mr-10" v-for="(item, index) in fileList" :key="index">
							<img class="upload-img" :src="baseUrl + item" />
							<div class="delImg" @click="DelImg(index)">
								<img src="@/assets/Images/AppIcon//icon_cancel.png" />
							</div>
						</div>
						<van-uploader
							v-if="fileList.length < 3"
							@oversize="onOversize"
							:after-read="afterRead"
						>
							<img
								class="upload-img"
								src="@/assets/Images/AppIcon/upload_picture.png"
								alt=""
							/>
						</van-uploader>
					</div>
				</div>
			</div>
		
			<div class="bottom-btns">
				<van-button type="primary" class="delete-btn" @click="save(true)">
					提交
				</van-button>
			</div>
			
		</div>

		<!-- 选择公司 -->
		<CompanySelect
            :show.sync="DepartmentShow"
            @callback="_chooseCompanySelect"
            >
        </CompanySelect>
	</div>
</template>

<script>
import { initNewEntity, addPost ,editPost ,getDangerDetail } from '@/api/CompanyEscalation'
import { mapGetters } from 'vuex'
import { upload } from '@/api/common'
import store from '@/store/index'
import Classifys from '@/components/Classifys/Classifys.vue'
import Departmentbumen from "../CompanyEscalation/departmentChooseDialog.vue";
import CompanySelect from '../CompanyEscalation/userCompanyChooseDialog.vue'

export default {
	components: {
		Classifys,
		Departmentbumen,
		CompanySelect,
	},
	data() {
		return {
			id: 0,
      		data: { },
			uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
			idx: '',
			show: false,
			fileList: [],
			DepartmentShow: false,
			isShow: false,
		}
	},
	computed: {
		...mapGetters(['baseUrl', 'CompanyCode', 'roles']),
	},
	created() {
		this.id = this.$route.query.id;
		this.initNewEntity()
		let title = '新增重点企业上报'
		store.commit('updateTitle', title)
	},
	activated() {
	},

	
	watch: {
		//监测变化
		isShow(val) {
			if (this.isShow == false) {
				//添加一个历史记录
				history.pushState(null, null, window.location.href)
			}
		},
	},
	mounted() {
		//添加一个历史记录
		history.pushState(null, null, window.location.href)
		window.addEventListener('popstate', this.exit_dialog)
	},
	destroyed() {
		//销毁该事件
		window.removeEventListener('popstate', this.exit_dialog)
	},
	methods: {
		exit_dialog() {
			//关闭弹窗
			this.isShow = false
		},
		// 上传图片
		afterRead(file) {
			let params = new FormData() //创建form对象
			params.append('file', file.file)
			upload(params)
				.then((res) => {
					res.data.forEach((item) => {
						this.fileList.push(item.FilePath)
					})
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		onOversize(file) {
			Toast('文件大小不能超过 2M')
		},
		// 删除图片
		DelImg(idx) {
			const _this = this
			_this.$dialog
				.confirm({
					title: '询问',
					message: '确定要删除此照片吗？',
				})
				.then(() => {
					_this.fileList.splice(idx, 1)
				})
				.catch(() => {
					// on cancel
				})
		},
        getDangerDetail(){
			const param = {
				id: this.id,
			}
			getDangerDetail(param).then((res) => {
				console.log(res.data, 'res.data')
				this.data = res.data
				if (res.data.Attachs != null && res.data.Attachs != "") {
					this.fileList = res.data.Attachs.split(";");
				}
				
				
				
			})

		},
		// 计划详情
		initNewEntity() {
			const param = {
				id: 0,
				ctCode: this.ctCode,
				OriginType: this.OriginType,
			}
			initNewEntity(param).then((res) => {
				console.log(res.data, 'res.data')
				this.data = res.data
				this.data.HiddenDangerType = '1'
				if (this.$route.params.fileList) {
					this.fileList = this.$route.params.fileList.split(';')
					console.log(this.fileList, 'this.fileList')
				}
			})
		},
		// 点击保存
		save(Confirm, info) {
				
			if (this.fileList.length == 0) {
				return this.$toast('请上传附件!')
			}
			if(!this.data.EnterpriseName) {
				return this.$toast('请选择公司')
			}
			if(!this.data.ReasonType) {
				return this.$toast('请选择上报类型')
			}

			this.loading = true
			// 	Attachs: this.fileList.join(';'),
	
			this.data.IsPublish = Confirm;
			this.data.Attachs = this.fileList.join(';');

			if (this.id == 0) {
				//let newform = deepClone(form)
				addPost(this.data, Confirm)
					.then((res) => {
						console.log(res, 'res')

						this.loading = false
						if (info == 'info') {
							this.fileList = [];
							this.data = {};
							//this.data.ID = newform.ID
							return
						}
						setTimeout(() => {
							this.$router.push('/CompanyEscalation')
						}, 500)
					})
					.catch((err) => {
						console.log('err', err)
					})
			}
		},
		// 选择公司
		_goCheckPeople(backpath) {
			
			this.DepartmentShow = true
		},
		// 选择公司回调
		_chooseCompanySelect(item) {
			if (item) {
				this.$set(this.data, 'EnterpriseName', item.CompanyName || '')
				this.data.EnterpriseCode = item.CompanyCode || '',
				this.DepartmentShow = false
			}
		},
	},
}
</script>

<style lang="less" scoped>
.upload-hd {
	display: flex;
    padding-top: 10px;
	padding-bottom: 10px;
	.upload-img,
	.imgs {
		position: relative;
		width: 60px;
		height: 60px;
	}
	.delImg {
		position: absolute;
		top: -5px;
		right: -5px;
		width: 16px;
		height: 16px;
		img {
			width: 100%;
			height: 100%;
		}
	}
}

.check-task {
	background-color: #e8f1f8;
	padding-bottom: 20px;
}
.problem {
	margin-bottom: 10px;
}
.bottom-btns {
	margin-top: 10px;
	padding: 0 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.submit-btn {
		width: 48%;
		height: 35px;
		font-size: 14px;
	}
	.delete-btn {
		width: 100%;
		height: 35px;
		font-size: 14px;
	}
}
.warning {
	background-color: #fff;
	padding: 10px;
	font-size: 10px;
}
.fjcolor {
	background-color: #fff;
}
.borderbot{
	border-bottom: 0.02667rem solid #ebedf0;
	margin: 0 10px;
}
.det_tab_item {
	padding: 10px 0;
	background-color: #fff;
	border-radius: 5px;
	margin-bottom: 10px;

	.det_tab_item_text {
		padding: 0 10px;
	}
}
.operate_det {
	background-color: #fff;
	padding: 10px;
	.operate_list {
		font-size: 12px;
		border: 1px solid #e8f1f8;
		.operate_row_first {
			padding: 10px;
			background-color: #e8f1f8;
			border-bottom: 1px solid #e8f1f8;
			margin-bottom: 10px;
		}
		.operate_row {
			padding: 10px;
			border-bottom: 1px solid #e8f1f8;
			/*margin-bottom: 10px;*/
		}
	}
}
.week {
	color: rgb(0, 195, 224);
}
.imglist{
	margin-left: 5px;
	margin-right: 1.6rem;
	color: #646566;
	font-size: 0.37333rem;
}
.imglist::before{
	position: absolute;
    left: 0.21333rem;
    color: #c03131;
    font-size: 0.37333rem;
    content: '*';
}
</style>
